<template>
  <div class="pricing-management">
    <div class="header">
      <h2 class="header-title">以下为针对乘客乘车费用的收费项（不包含附加收费）</h2>
      <el-button type="primary" @click="openDialog" style="float: right">修改</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column>
        <template slot-scope="scope">
          <el-tag>{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          {{ scope.row.value }} {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          {{ scope.row.ms }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑收费项" :visible.sync="dialogVisible">
      <el-form :model="formData">
        <el-form-item label="起步价" label-width="120px">
          <el-input v-model="formData.startFee" type="number" step="0.01"/>
        </el-form-item>
        <el-form-item label="里程费" label-width="120px">
          <el-input v-model="formData.smileFee" type="number" step="0.01"/>
        </el-form-item>
        <el-form-item label="免费等待时间" label-width="120px">
          <el-input v-model="formData.freeWaitTime" type="number"/>
        </el-form-item>
        <el-form-item label="等待费" label-width="120px">
          <el-input v-model="formData.waitFee" type="number" step="0.01"/>
        </el-form-item>
        <el-form-item label="超时取消等待时间" label-width="120px">
          <el-input v-model="formData.cancelWaitTime" type="number"/>
        </el-form-item>
        <el-form-item label="超时取消费" label-width="120px">
          <el-input v-model="formData.cancelOuttimeFee" type="number" step="0.01"/>
        </el-form-item>
        <el-form-item label="接单取消次数" label-width="120px">
          <el-input v-model="formData.cancelBillTimes" type="number"/>
        </el-form-item>
        <el-form-item label="接单取消费" label-width="120px">
          <el-input v-model="formData.cancelBillFee" type="number" step="0.01"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectCustomerPayRule, updateCustomerPayRule } from '@/api/operate/rule'

export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        startFee: 0,
        smileFee: 0,
        freeWaitTime: 0,
        waitFee: 0,
        cancelWaitTime: 0,
        cancelOuttimeFee: 0,
        cancelBillTimes: 0,
        cancelBillFee: 0
      },
      resData: {}
    }
  },
  computed: {
    tableData() {
      return [
        {
          label: '起步价',
          value: this.formData.startFee,
          unit: '元',
          ms: '乘客上车后的第一段距离（3Km以内）收取的基础费用'
        },
        {
          label: '里程费',
          value: this.formData.smileFee,
          unit: '元/km',
          ms: '根据实际行驶里程计算的费用。每公里的费用在起步价之后按公里数累加'
        },
        {
          label: '免费等待时间',
          value: this.formData.freeWaitTime,
          unit: '分钟',
          ms: '当司机到达接送点后，乘客未及时上车时，按照每分钟收取的等待费用'
        },
        {
          label: '等待费',
          value: this.formData.waitFee,
          unit: '元/分钟',
          ms: '司机到达接送点后，乘客可以享有一定的免费等待时间，超出部分开始计算等待费'
        },
        {
          label: '超时取消等待时间',
          value: this.formData.cancelWaitTime,
          unit: '分钟',
          ms: '乘客在订单确认后的指定时间内，可以免费取消订单，超出时间后将产生取消费用'
        },
        {
          label: '超时取消费',
          value: this.formData.cancelOuttimeFee,
          unit: '元',
          ms: '超过免费取消时间后，乘客取消订单将扣除一定费用'
        },
        {
          label: '接单取消次数',
          value: this.formData.cancelBillTimes,
          unit: '次',
          ms: '乘客在司机确认接单后的指定次数内，可以免费取消订单，超出次数后将产生取消费用'
        },
        {
          label: '接单取消费',
          value: this.formData.cancelBillFee,
          unit: '元',
          ms: '如果乘客在司机确认接单后的某一时间内取消订单，将会收取一定的取消费用'
        }
      ]
    }
  },
  methods: {
    //获取数据
    getRuleData() {
      //请求后端初始化tableData数据
      selectCustomerPayRule().then((res) => {
        this.formData = res.data
      })
    },
    openDialog() {
      this.dialogVisible = true
    },
    saveChanges() {
      // 处理保存逻辑，例如调用API保存更改的数据
      updateCustomerPayRule(this.formData).then(res => {
        this.$message.success(res.msg)
      })
      console.log('保存数据:', this.formData)
      this.dialogVisible = false
    }
  },
  created() {
    this.getRuleData()
  }
}
</script>

<style scoped>
.pricing-management {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header-title {
  color: red;
  font-size: 18px;
  display: inline;
}
</style>
